<template>
  <div class="error-page">
    <vxe-table border height="95%" :scroll-y="{ enabled: true, gt: 30 }" :row-config="{ isHover: true }" :data="passData">
      <vxe-column type="seq" width="50"></vxe-column>
      <template v-for="(item, index) in column" :key="index">
        <vxe-column :field="item.field" :title="item.title" :min-width="item.width"></vxe-column>
      </template>
    </vxe-table>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from "vue";

/*
组件说明：上传文件报错抽屉
需传报错的数组和表头
表头字段需定义一个data.ts文件

模版：
export const column = [
  {
    field: "waybillNum",
    title: "运单号",
    width: "180"
  },
];

*/

const props = withDefaults(
  defineProps<{
    passData: Array<any>; //表单数据
    visible: boolean;
    column: Array<any>; //自定义表头字段
  }>(),
  {}
);
const { passData, visible, column } = toRefs(props);
const tableData = ref<Array<any>>([]);
const init = () => {
  tableData.value = passData.value;
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      tableData.value = [];
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.error-page{
    box-sizing: border-box;
    height: calc(100vh - 90px);
    background-color: #fff;
    padding: 12px;
  }
</style>
